import Callout from 'components/Callout';

# TypeScript integration

`next-intl` integrates with TypeScript out-of-the box without additional setup. You can however provide the shape of your messages to get autocompletion and type safety for your namespaces and message keys.

```json filename="messages.json"
{
  "About": {
    "title": "Hello"
  }
}
```

```tsx filename="About.tsx"
function About() {
  // ✅ Valid namespace
  const t = useTranslations('About');

  // ✖️ Unknown message key
  t('description');

  // ✅ Valid message key
  return <p>{t('title')}</p>;
}
```

To enable this validation, add a global type definition file in your project root (e.g. `global.d.ts`):

```jsx filename="global.d.ts"
import en from './messages/en.json';

type Messages = typeof en;

declare global {
  // Use type safe message keys with `next-intl`
  interface IntlMessages extends Messages {}
}
```

You can freely define the interface, but if you have your messages available locally, it can be helpful to automatically create the interface based on the messages from your default locale by importing it.

**If you're encountering problems, please double check that:**

1. Your interface is called `IntlMessages`.
2. You're using TypeScript version 4 or later.
3. The path of your `import` is correct.
4. Your type declaration file is included in `tsconfig.json`.
5. Your editor has loaded the most recent type declarations. When in doubt, you can restart.
